<template>
  <!-- <div class e="head-div"></div> -->
  <div>
    <button @click="logout">登出</button>
  </div>
  <div class="layout-container">
    <el-splitter class="divs">
      <el-splitter-panel collapsible v-model:size="leftSize">
        <!-- 左侧区域 -->
        <LeftPanle @resize-start="startResize" @update:width="leftWidth = $event" />
      </el-splitter-panel>
      <el-splitter-panel :min="400" class="center-panel" v-model:size="centerSize">
        <!-- 中间区域 -->
        <CenterPanle @open-ai="openai" :show-ai-button="!showRightPanel" />
      </el-splitter-panel>
      <el-splitter-panel collapsible v-model:size="rightSize">
        <!-- 右侧区域 -->
        <RightPanle :visible="showRightPanel" @close="close" />
      </el-splitter-panel>
    </el-splitter>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import LeftPanle from '@/components/index-left-s/index.vue'
import CenterPanle from '@/components/index-center-s/index.vue'
import RightPanle from '@/components/index-right-s/indexTest2.vue'
import { useUserStore } from '@/stores/userStore'
import { useCommentStore } from '@/stores/commentStore'
import router from '../router'


const leftSize = ref(300)
const rightSize = ref(300)
const userStroe = useUserStore()
const currentUser = userStroe.user

const logout = () => {
  userStroe.logout(currentUser)
  // router.push('/login')
  userStroe.user = {id:'', name:'', account:'', role:'', token:''}
  useCommentStore().clearComments()

}

</script>

<style scoped>

.layout-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

.left-panel {
  border-right: 1px solid #dcdfe6;
}

.right-panel {
  border-left: 1px solid #dcdfe6;
}

.center-panel {
  flex: 1;
}
</style>
